<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 列表渲染</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>

<div id="root">

    <!--    v-for指令: v-for="(item,index) in xxx" :key="yyy" 可以遍历数组,对象,字符串-->

    <!--    循环数组-->
    <ur>
        <li v-for="person in personList" :key="person.id">
            {{person.name}} - {{person.age}}
        </li>
    </ur>
    <br/>
    <ur>
        <li v-for="(person,index) in personList" :key="index">
            {{index}} -- {{person.name}} - {{person.age}}
        </li>
    </ur>

    <!--    循环对象-->
    <br/>
    <ur>
        <li v-for="(v,k,index) in car" :key="index">
            {{index}} -- {{k}} -- {{v}}
        </li>
    </ur>

    <!-- :key 原理分析 : key尽量使用唯一值-->
    <br/>
    <input type="text" v-model="nameQueryValue" placeholder="please input"/>
    <button @click.once="addPerson">add person</button>
    <button @click="sortType = 'asc' ">ascSort</button>
    <button @click="sortType = 'desc' ">descSort</button>
    <ur>
        <!--        <li v-for="(person,index) in filPersons" :key="person.id">-->
        <!--            {{person.name}} - {{person.age}}-->
        <!--            <input type="text">-->
        <!--        </li>-->
        <li v-for="(person,index) in computedPersons" :key="person.id">
            {{person.name}} - {{person.age}}
            <input type="text">
        </li>
    </ur>
</div>

<script type="text/javascript">
    new Vue({
        el: '#root',
        data: {
            personList: [
                {id: "1001", name: "Zhangsan", age: 23},
                {id: "1002", name: "Lisi", age: 28},
                {id: "1003", name: "Wangwu", age: 19}
            ],
            filPersons: [],
            car: {name: "xj", color: "black", price: 12589.99},
            nameQueryValue: '',
            sortType: 'asc'// asc 或者 desc
        },
        methods: {
            addPerson() {
                const addPerson = {id: "1004", name: "Laoliu", age: 24}
                this.personList.unshift(addPerson)
            }
        },
        computed: {
            computedPersons() {
                const filePersonList = this.personList.filter(p => {
                    return p.name.indexOf(this.nameQueryValue) !== -1
                })
                console.log(this.sortType, "--:", JSON.stringify(filePersonList))

                /*基础不扎实 - 踩坑 (排序比较写普通函数导致获取不到this.sortType),应用箭头函数
                filePersonList.sort(function (a, b) {
                    return this.sortType === 'asc' ? b.age - a.age : a.age - b.age
                })*/

                filePersonList.sort((a, b) => {
                    return this.sortType === 'asc' ? b.age - a.age : a.age - b.age
                })
                console.log(this.sortType, "==:", JSON.stringify(filePersonList))
                return filePersonList;
            }
        }
        /*,
        watch: {
            // watch 实现
            nameQueryValue: {
                immediate: true,
                handler(val) {
                    this.filPersons = this.personList.filter(p => {
                        return p.name.indexOf(val) !== -1
                    })
                    this.filPersons.sort(function (a, b) {
                        return this.sortType === 'asc' ? a.age - b.age : b.age - a.age
                    })
                }
            }

        }*/
    })
</script>

</body>
</html>